<template>
  <div class="pagestyle">
    <list_controller :noprintDownShow="true" v-show="state.options.tabName == 1" ref="zujianname" :options="state.options">
      <template v-slot:opraCurdBtnAll>
        <span v-if="userStore.modify" :class="state.addModal ? 'listInfoBtn active' : 'listInfoBtn'"
          @click="addBtn('mul')">
          <svg-icon :class="state.addModal ? 'active' : ''" class-name="search-icon" icon-class="xinzeng" />
          新增
        </span>
        <span v-if="userStore.modify" :class="'listInfoBtn'" @click="deleteBtn('mul')">
          <svg-icon class-name="search-icon" icon-class="shanchu" />
          删除
        </span>
      </template>
      <template v-slot:selectNamelist>
        <span>区域信息</span>
        <el-select class="sel" v-model="state.options.tabName" size="small" style="width: 60px" @change="tabChangeSel">
          <el-option v-for="item in state.options.tabList" :key="item.tabIndex" :label="item.name"
            :value="item.tabIndex" />
        </el-select>
      </template>
      <template v-slot:opraCurdBtnlist="row">
        <span>
          <el-button type="primary" link size="small" @click="lookBtn(row.row.row)">查看</el-button>
          <el-button type="primary" link size="small" @click="editBtn(row.row.row)">编辑</el-button>
          <el-button type="primary" link size="small" @click="deleteBtn(row.row.row)">删除</el-button>
        </span>
      </template>
    </list_controller>
    <!-- 新增弹框 -->
    <teleport to="body">
      <vxe-modal esc-closable destroy-on-close :lock-view="false" :width="660" :height="auto" v-model="state.addModal"
        resize :mask="true" showFooter>
        <template #title>
          <div class="w100 h100 fsc mask_title">{{ state.modalTitle }}</div>
        </template>
        <template #default>
          <div class="form_box">
            <el-form ref="formRef" :model="state.formData" :rules="state.rules" label-position="top">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="区域名称" prop="areaName">
                    <el-input clearable v-model="state.formData.areaName" placeholder="请输入">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="区域类型" prop="areaTypeName">
                    <el-select clearable filterable v-model="state.formData.areaTypeName" placeholder="请选择"
                      allow-create>
                      <el-option v-for="item in state.searchAllList" :key="item.id" :label="item.areaTypeName"
                        :value="item.areaTypeName">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="所属区域" prop="parentAreaId">
                    <el-tree-select v-model="state.formData.parentAreaId" ref="treeRef" :data="state.searchTreeList"
                      node-key="id" clearable :default-expanded-keys="[state.formData.parentAreaId]" :props="{
                        children: 'childList',
                        value: 'id',
                        label: 'areaName',
                      }" placeholder="请选择" highlight-current @node-click="nodeclick" check-strictly />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <p class="mask_sub_title fbc">
                    <span>坐标集合<el-button size="small" link type="primary">GIS获取</el-button>
                    </span>
                    <el-col :span="1">
                      <svg-icon class-name="search-icon" icon-class="addblue" @click="addblueClick(index)" />
                    </el-col>
                  </p>
                </el-col>
                <div style="height: 400px; overflow-y: auto; overflow-x: hidden">
                  <el-row :gutter="20" style="padding: 0 10px; display: flex; align-items: center"
                    v-for="(item, index) in state.locations" :key="index">
                    <el-col :span="7">
                      <el-form-item label="X">
                        <el-input clearable v-model="item.locationX" placeholder="请输入"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="7">
                      <el-form-item label="Y">
                        <el-input clearable v-model="item.locationY" placeholder="请输入"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="7">
                      <el-form-item label="Z">
                        <el-input clearable v-model="item.locationZ" placeholder="请输入"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="1">
                      <svg-icon class-name="search-icon" icon-class="delred" @click="delredClick(index)" />
                    </el-col>
                  </el-row>
                </div>
              </el-row>
            </el-form>
          </div>
        </template>
        <template #footer>
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submitForm"> 确定 </el-button>
        </template>
      </vxe-modal>
    </teleport>
    <!-- 详情 -->
    <el-drawer v-model="state.drawerShow" direction="rtl" size="50%" close-on-click-modal :modal="true">
      <template #header="{ close, titleId, titleClass }">
        <h4 class="mask_sub_title">
          <svg-icon class-name="search-icon" icon-class="biaotitubiao" /><span>区域信息详情</span>
        </h4>
      </template>
      <p class="drawer_sub_title">
        <span class="sub_title_line">基础信息</span>
      </p>
      <el-row :gutter="20" style="
          background: rgba(91, 109, 128, 0.04);
          display: flex;
          align-items: center;
          padding: 20px 0;
        ">
        <el-col :span="8" style="text-align: center">
          <div class="img_box">
            <span>{{ state.formData.areaName }}</span>
          </div>
        </el-col>
        <el-col :span="16">
          <el-row :gutter="20">
            <el-col :span="7">
              <p>区域类型</p>
              <p>{{ state.formData.areaTypeName }}</p>
            </el-col>
            <el-col :span="9">
              <p>地理位置</p>
              <el-button link type="primary" v-for="item in state.formData.locations">
                {{ item.locationX }},{{ item.locationY }},{{
                  item.locationZ
                }}</el-button>
            </el-col>
            <el-col :span="8">
              <p>上级区域</p>
              <p>{{ state.formData.parentAreaName }}</p>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 10px">
        <el-col :span="8">
          <p class="drawer_sub_title">
            <span class="sub_title_line">区域下分站</span>
          </p>
          <vxe-table height="240" :data="state.searchChildStationList">
            <vxe-column title="序号" type="seq" :width="55"></vxe-column>
            <vxe-column title="分站编号" field="stationCode"> </vxe-column>
            <vxe-column title="安装地点" field="stationPlaceName"> </vxe-column>
          </vxe-table>
        </el-col>
        <el-col :span="8">
          <p class="drawer_sub_title">
            <span class="sub_title_line">下级区域</span>
          </p>
          <vxe-table height="240" :data="state.searchChildAreaUrlList">
            <vxe-column title="序号" type="seq" :width="55"></vxe-column>
            <vxe-column title="区域名称" field="areaName"> </vxe-column>
          </vxe-table>
        </el-col>
        <el-col :span="8">
          <p class="drawer_sub_title fbc">
            <span class="sub_title_line">相邻区域</span>
            <el-button link type="primary" @click="nearAreaeditclick">编辑</el-button>
          </p>
          <vxe-table height="240" :data="state.nearAreaList">
            <vxe-column type="seq" title="序号" width="55"></vxe-column>
            <vxe-column title="区域名称" field="nearAreaName"> </vxe-column>
          </vxe-table>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <p class="drawer_sub_title">
            <span class="sub_title_line">人员信息</span>
          </p>
          <list_controller ref="zujianname" :options="state.options1" pageName="" @deleteBtn="deleteBtn"
            @addBtn="addBtn" @editBtn="editBtn" @lookBtn="lookBtn" :addBtnMul="false" :delBtnMul="false"
            :editBtnMul="false"></list_controller>
        </el-col>
      </el-row>
    </el-drawer>
    <!-- 相邻区域编辑 -->
    <el-drawer v-model="state.drawerNearShow" direction="rtl" size="40%" close-on-click-modal :modal="true"
      :before-close="handleClose">
      <template #header="{ close, titleId, titleClass }">
        <h4 class="mask_sub_title">
          <svg-icon class-name="search-icon" icon-class="biaotitubiao" /><span>相邻区域设置</span>
        </h4>
      </template>
      <el-radio-group v-model="state.nearAreatabName" size="small" @change="tabChange">
        <el-radio-button v-for="item in state.nearAreaListTab" :label="item.name" :value="item.tabIndex" />
      </el-radio-group>
      <div>
        <p style="display: flex; justify-content: flex-end" v-if="state.nearAreatabName == '未设置相邻'">
          <el-button link type="primary" size="mini" @click="settingnearClick(1, 'mul')">
            <svg-icon class-name="search-icon" icon-class="setting" />设置单向相邻
          </el-button>
          <el-button link type="primary" style="margin-left: 10px" size="mini" @click="settingnearClick(2, 'mul')">
            <svg-icon class-name="search-icon" icon-class="setting" />设置双向相邻
          </el-button>
        </p>
        <p v-else style="display: flex; justify-content: flex-end">
          <el-button link type="primary" style="margin-left: 10px" size="mini"
            @click="settingnearClick(undefined, 'mul')">
            <svg-icon class-name="search-icon" icon-class="setting" />取消相邻
          </el-button>
        </p>
        <vxe-table height="240" :data="state.nearinfoAreaList" @checkbox-change="checkchange"
          v-if="state.nearAreatabName == '未设置相邻'">
          <vxe-column type="checkbox" :width="42"></vxe-column>
          <vxe-column title="编号" type="seq" :width="55"></vxe-column>
          <vxe-column title="区域名称" field="areaName"> </vxe-column>
          <vxe-column title="操作" field="show">
            <template #default="{ row }">
              <p>
                <el-button link type="primary" size="mini" @click="settingnearClick(1, row)">
                  设置单向相邻
                </el-button>
                <el-button link type="primary" style="margin-left: 10px" size="mini" @click="settingnearClick(2, row)">
                  设置双向相邻
                </el-button>
              </p>
            </template>
          </vxe-column>
        </vxe-table>
        <vxe-table height="240" :data="state.nearAreaList" @checkbox-change="checkchange" v-else>
          <vxe-column type="checkbox" :width="42"></vxe-column>
          <vxe-column title="编号" type="seq" :width="55"></vxe-column>
          <vxe-column title="区域名称" field="nearAreaName"> </vxe-column>
          <vxe-column title="操作" field="show">
            <template #default="{ row }">
              <el-button link type="primary" style="margin-left: 10px" size="mini"
                @click="settingnearClick(undefined, row)">
                取消相邻
              </el-button>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
    </el-drawer>
    <!-- 四维导图 -->
    <div class="fbc" style="padding: 25px 20px 0 20px; font-weight: 700">
      <div class="ffc">
        <span>区域信息</span>
        <el-select class="sel" v-model="state.options.tabName" size="small" style="width: 60px" @change="tabChangeSel">
          <el-option v-for="item in state.options.tabList" :key="item.tabIndex" :label="item.name"
            :value="item.tabIndex" />
        </el-select>
      </div>
      <span v-if="userStore.modify" :class="state.addModal ? 'listInfoBtn active' : 'listInfoBtn'"
        @click="daotuAddClick">
        <svg-icon :class="state.addModal ? 'active' : ''" class-name="search-icon" icon-class="xinzeng" />
        新增区域
      </span>
    </div>
    <!-- tab切换 -->
    <div class="treeTabBox"><span :class="state.treeDataIndex==item.id?'sBox active':'sBox'"
        v-for="item in state.treeDataList" @click="treeDataClick(item)"><img :src="icontree" alt="">
        <span>{{ item.areaName }}</span></span></div>
    <div v-show="state.options.tabName == 2">
      <div id="treeChart" style="width: 100%;
      height: 700px;">
      </div>
    </div>
    <!-- 区域树卡片右上角更多按钮 -->
    <div v-if="state.moreCardObj.show" style="background-color: #fff;position: absolute;
    height: 85px;border-radius: 4px;" :style="{top:state.moreCardObj.y+'px',left:state.moreCardObj.x+'px'}">
      <el-cascader-panel style="width: fit-content;"
        :style="{top:state.moreCardObj.y+'px',left:state.moreCardObj.x+'px'}" :options="[{
    value:1,
    label: '地理位置'}, {value:2,
    label: '相邻区域'}]" @change="moreCardObjChange" />
    </div>
  </div>
</template>
<script setup>
  import {
    ref,
    onMounted,
    nextTick,
    computed,
    reactive,
    inject
  } from "vue";
  import {
    ElMessage,
    ElMessageBox
  } from 'element-plus'
  import "jsmind/style/jsmind.css";
  import JsMind from "jsmind";
  import CreateDom from "@/utils/daotu.js";
  import list_controller from "@/components/commonCom/list_controller";
  import {
    table_headers
  } from "@/components/commonCom/table_headers";
  import axios from "@/utils/request";
  import usePagesStore from "@/store/modules/pages";
  import icontree from '@/assets/images/icontree.png'
  import addtree from '@/assets/images/addtree.png'
  import edittree from '@/assets/images/edittree.png'
  import deltree from '@/assets/images/deltree.png'
  import moretree from '@/assets/images/moretree.png'
  import {
    gettypeList,
    getsearchTree
  } from "@/api/config";
  import useUserStore from "@/store/modules/user";
  const userStore = useUserStore();
  const {
    proxy
  } = getCurrentInstance();
  const store = usePagesStore();
  const treeRef = ref(null);
  import * as echarts from 'echarts'
  let treeChart;
  const state = reactive({
    treeDataIndex: undefined,
    treeDataList: [],
    moreCardObj: {
      show: false,
      x: 0,
      y: 0
    },
    isHighLightid: undefined,
    fromtree: false,
    jsmindList: [],
    nearrecords: [],
    options: {
      tabName: 2,
      tabList: [{
          tabIndex: 1,
          name: "列表",
        },
        {
          tabIndex: 2,
          name: "多维",
        },
      ],
      tableheads: computed(() => table_headers.areaBasic),
      queryList: {
        dropdownUrl: "",
        querys: [],
        queryMap: new Map([
          ["sensorTypeId", "safety_pointType"],
          ["deviceTypeId", "safety_deviceType"],
          ["alarmTypeId", "alarmType"],
        ]),
      },
      dataUrl: "/area/info/searchAll",
      delUrl: "/area/info/deleteArea",
      addUrl: "/area/info/addArea",
      descUrl: "/area/info/searchAreaDetail",
      editUrl: "/area/info/editArea",
    },
    // 表单
    addModal: false,
    modalTitle: "新增地理位置",
    drawerShow: false,
    formRef: null,
    formData: {},
    parentAreaId: undefined,
    rules: {
      areaName: [{
        required: true,
        message: "请输入区域名称",
        trigger: "blur",
      }, ],
      areaTypeName: [{
        required: true,
        message: "请选择区域类型",
        trigger: "change",
      }, ],
    },
    editId: undefined,
    searchAllList: [],
    searchTreeList: [],
    locations: [{
      locationX: undefined,
      locationY: undefined,
      locationZ: undefined,
    }, ],
    nearAreaUrl: "/area/near/search/",
    nearinfoAreaList: [], //非相邻
    nearAreaList: [], //相邻
    nearAreatabName: "未设置相邻",
    nearAreaListTab: [{
        name: "未设置相邻",
        tabIndex: 1,
      },
      {
        name: "已设置相邻",
        tabIndex: 1,
      },
    ],
    nearId: undefined,
    drawerNearShow: false,
    searchChildAreaUrl: "/area/info/searchChildArea/",
    settingAreaUrl: "/area/near/add",
    searchChildAreaUrlList: [],
    searchChildAreaUrlTab: [],
    searchChildStationList: [],
    options1: {
      tabList: [{
          tabIndex: 1,
          name: "列表",
        },
        {
          tabIndex: 2,
          name: "多维",
        },
      ],
      tableheads: computed(() => table_headers.areaBasic),
      queryList: {
        dropdownUrl: "",
        querys: [{
            field: "stationTypeName",
            title: "姓名",
            type: "input",
            binddata: "",
          },
          {
            field: "职位",
            title: "分站模式",
            type: "select",
            binddata: "",
            options: [],
          },
        ],
        queryMap: new Map([
          ["sensorTypeId", "safety_pointType"],
          ["deviceTypeId", "safety_deviceType"],
          ["alarmTypeId", "alarmType"],
        ]),
      },
      dataUrl: "/area/info/searchAll",
      delUrl: "/area/info/deleteArea",
      addUrl: "/area/info/addArea",
      descUrl: "/area/info/searchDetail",
      editUrl: "/area/info/editArea",
    },
  });
  // 查看按钮
  function lookBtn(row) {
    state.drawerShow = true;
    state.nearId = row.id;
    getChildAreaList();
    getnearAreaList1("已设置相邻");
    getsearchChildStation();
    axios
      .post(state.options.descUrl, {
        id: row.id,
      })
      .then((res) => {
        if (res.code == 200) {
          state.formData = res.data;
        }
      });
  }
  // 列表-新增按钮
  function addBtn(row) {
    state.modalTitle = "新增区域";
    state.addModal = true;
    state.fromtree = false;
    state.formData = {};
    state.locations = [{
      locationX: 0,
      locationY: 0,
      locationZ: 0,
    }, ];
    state.formData.parentAreaId = state.parentAreaId;
    state.editId = undefined;
    getSelList();
  }
  // 获取下拉选
  function getSelList() {
    gettypeList().then((res) => {
      state.searchAllList = res.data;
    });
    getsearchTree().then((res) => {
      state.searchTreeList = res.data;
    });
  }
  getSelList();
  // 列表-编辑按钮
  function editBtn(row) {
    state.modalTitle = "编辑区域";
    state.addModal = true;
    state.fromtree = false;
    axios
      .post(state.options.descUrl, {
        id: row.id,
      })
      .then((res) => {
        if (res.code == 200) {
          state.formData = res.data;
          state.locations = res.data.locations;
          state.editId = res.data.id;
        }
      });
  }
  // 列表-删除按钮
  function deleteBtn(row) {
    let ids = [];
    if (row != "mul") {
      ids = [row.id];
    } else {
      if (store.records.length > 0) {
        ids = store.records.map((item) => {
          return item.id;
        });
      } else {
        proxy.$modal.msgSuccess("请先勾选所要删除数据!");
      }
    }

   if (ids.length > 0) {
      ElMessageBox.confirm(
          '确定要删除该数据吗?',
          '温馨提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
        .then(() => {
          axios.post(state.options.delUrl, ids).then(res => {
            if (res.code == 200) {
              proxy.$refs['zujianname'].getData()
              state.addModal = false
              ElMessage({
                type: 'success',
                message: res.msg,
              })
              store.records = []
              gettreeList(undefined,state.treeDataIndex)
            }
          })

        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '删除取消',
          })
        })
    }

  }
  /** 列表-提交按钮 */
  function submitForm() {
    proxy.$refs["formRef"].validate((valid) => {
      if (valid) {
        state.formData.rootId = state.treeDataIndex
        if (state.editId) {
          state.formData.id = state.editId;
          axios.post(state.options.editUrl, state.formData).then((res) => {
            if (res.code == 200) {
              proxy.$refs["zujianname"].getData();
              state.addModal = false;
              proxy.$modal.msgSuccess(res.msg);
              getSelList();
              gettreeList(undefined,state.treeDataIndex)
            }
          });
        } else {
          state.formData.locations = state.locations;
          axios.post(state.options.addUrl, state.formData).then((res) => {
            if (res.code == 200) {
              proxy.$refs["zujianname"].getData();
              state.addModal = false;
              proxy.$modal.msgSuccess(res.msg);
              getSelList();
              gettreeList(undefined,state.treeDataIndex)
            }
          });
        }
      }
    });
  }

  function cancel() {
    state.addModal = false;
  }

  // 获取编辑详情表格数据-下级区域
  function getChildAreaList() {
    axios.post(state.searchChildAreaUrl + state.nearId, {}).then((res) => {
      if (res.code == 200) {
        state.searchChildAreaUrlList = res.data;
      }
    });
  }
  // 获取详情-区域下分站
  function getsearchChildStation() {
    axios
      .post("/area/info/searchChildStation/" + state.nearId, {})
      .then((res) => {
        state.searchChildStationList = res.data;
      });
  }
  // 获取相邻非相邻
  function getnearAreaList1(val) {
    if (val == "未设置相邻") {
      axios.post("/area/info/search/" + state.nearId, {}).then((res) => {
        if (res.code == 200) {
          state.nearinfoAreaList = res.data;
          proxy.$refs['zujianname'].getData()
        }
      });
    } else {
      axios.post(state.nearAreaUrl + state.nearId, {}).then((res) => {
        if (res.code == 200) {
          state.nearAreaList = res.data;
        }
      });
    }
  }
  // 编辑相邻区域
  function nearAreaeditclick() {
    state.drawerNearShow = true;
    getnearAreaList1("未设置相邻");
  }
  // 点击事件-坐标集合-删除
  function delredClick(index) {
    state.locations.splice(index, 1);
  }
  // 坐标集合-新增
  function addblueClick(index) {
    state.locations.push({
      locationX: 0,
      locationY: 0,
      locationZ: 0,
    });
    getSelList();
  }
  // 设置相邻tab切换
  function tabChange(val) {
    getnearAreaList1(val);
  }
  // 设置单双向取消相邻提交按钮
  function settingnearClick(status, row) {
    let arr = [];
    if (row == "mul") {
      if (state.nearrecords.length == 0) {
        proxy.$modal.msgSuccess("请先勾选所要设置的数据!");
      } else {
        if (status) {
          state.nearrecords.forEach((item) => {
            arr.push({
              areaId: state.nearId,
              nearAreaId: item.id, //nearAreaId
              status: status,
            });
          });
          axios.post(state.settingAreaUrl, arr).then((res) => {
            proxy.$modal.msgSuccess(res.msg);
            getnearAreaList1(state.nearAreatabName);
          });
        } else {
          state.nearrecords.forEach((item) => {
            arr.push({
              areaId: state.nearId,
              nearAreaId: item.nearAreaId, //nearAreaId
              status: status,
            });
          });
          axios.post("/area/near/cancel", arr).then((res) => {
            proxy.$modal.msgSuccess(res.msg);
            getnearAreaList1(state.nearAreatabName);
          });
        }
      }
    } else {
      if (status) {
        axios
          .post(state.settingAreaUrl, [{
            areaId: state.nearId,
            nearAreaId: row.id,
            status: status,
          }, ])
          .then((res) => {
            proxy.$modal.msgSuccess(res.msg);
            getnearAreaList1(state.nearAreatabName);
          });
      } else {
        axios
          .post("/area/near/cancel", [{
            areaId: state.nearId,
            nearAreaId: row.nearAreaId,
            status: status,
          }, ])
          .then((res) => {
            proxy.$modal.msgSuccess(res.msg);
            getnearAreaList1(state.nearAreatabName);
          });
      }
    }
  }
  // 相邻操作表单复选
  function checkchange(e) {
    state.nearrecords = e.records;
  }
  // 切换列表-多维下拉选
  function tabChangeSel(val) {
    state.tabName = val;
    if (val == 2) {
      gettreeList()
    }
  }
  // 递归导图
  const recursionTreeData = (treeData) => {
    let nodeData = [];
    treeData.forEach((item) => {
      if (item.childList) {
        item.children = recursionTreeData(item.childList);
      }
      if (item.isHighLight) {
        item.label = {
          borderColor: item.isHighLight ? "rgba(0, 186, 173, 1)" : '',
          backgroundColor: item.isHighLight ? "rgba(0, 186, 173, 0.14)" : '',
          borderWidth: item.isHighLight ? 2 : 1,
        }
      }
      nodeData.push(item);
    });
    return nodeData;
  };

  function gettreeList(val,treeDataIndex) {
    let url = '/area/info/areaTree'
    if (val) {
      url = "/area/info/areaTree/" + val;
    }
    axios.post(url).then((res) => {
      if (res.data.length > 0) {
        let data
        let nodeList = recursionTreeData(res.data); // res.data为tree[]
        state.treeDataList = nodeList
        if(treeDataIndex){
          nodeList.forEach(item=>{
            if(item.id==treeDataIndex){
              data=item
            }
          })
          state.treeDataIndex=treeDataIndex
        }else{
          state.treeDataIndex = state.treeDataList[0].id
          data=nodeList[0]
        }
        state.formData.rootId = null
        nextTick(() => {
          treeChart = echarts.init(document.getElementById("treeChart"));
          setC1(data)
        })
      }
    })
  }
  // 树形图表
  function setC1(arr) {
    let option = {
      tooltip: {
        trigger: 'item',
        formatter: '{b}'
      },
      grid: {
        top: 0,
        left: 0,
        right: 0,
        bottom: 0
      },
      legend: {
        show: false,
        top: '2%',
        left: '3%',
        bottom: '2%',
        orient: 'radial',
        textStyle: {
          color: '#fff'
        }
      },
      series: [{
        type: 'tree',
        roam: true,
        zoom: 0.9,
        id: arr.id,
        name: arr.areaName,
        data: [arr],
        top: 10,
        left: '8%',
        bottom: '2%',
        symbolSize: 0,
        initialTreeDepth: 20,
        label: {
          padding: [16, 0, 16, 0],
          fontSize: 14,
          formatter: params => {
            return `\t\t{img|}{b|${params.data.areaName}}\t{more|moretree}\n\n{f|分站}{x|相邻区域}{r|人员信息}\n{fn|${params.data.stationInfoNum}}{xn|${params.data.nearAreaInfoNum}}{rn|${params.data.personalInfoNum}}\n\t\t\t\t\t\t\t\t\t{fnl|}\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{xnl|}\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{rnl|}\n{add|新增}{edit|编辑}{remove|删除}`
          },
          backgroundColor: 'rgba(255, 255, 255, 1)',
          borderColor: 'rgba(238, 238, 238, 1)',
          borderWidth: 1,
          borderRadius: 6,
          width: 258,
          height: 117,
          rich: {
            b: {
              fontSize: 14,
              padding: [0, 6],
              fontWeight: 500,
              color: '#000',
              width: 200
            },
            img: {
              backgroundColor: {
                image: icontree,
              },
            },
            more: {
              padding:[0,10,2,0],
              width:6,
              height:10,
              color:'transparent',
              backgroundColor: {
                image: moretree,
              },
            },
            f: {
              width: 86,
              color: 'rgba(62, 70, 79, 0.6)',
              fontSize: 14,
              lineHeight: 40,
              align: 'center',
            },
            fn: {
              width: 86,
              fontSize: 14,
              fontWeight: 600,
              color: 'rgba(64, 158, 255, 1)',
              align: 'center',
            },
            fnl: {
              width: 12,
              height: 2,
              backgroundColor: 'rgba(64, 158, 255, 1)'
            },
            xnl: {
              width: 10,
              height: 2,
              backgroundColor: 'rgba(64, 158, 255, 1)'
            },
            rnl: {
              width: 12,
              height: 2,
              backgroundColor: 'rgba(64, 158, 255, 1)'
            },
            x: {
              width: 86,
              color: 'rgba(62, 70, 79, 0.6)',
              fontSize: 14,
              lineHeight: 40,
              align: 'center',
            },
            xn: {
              width: 86,
              fontSize: 14,
              fontWeight: 600,
              color: 'rgba(64, 158, 255, 1)',
              align: 'center',
            },
            r: {
              width: 86,
              color: 'rgba(62, 70, 79, 0.6)',
              lineHeight: 40,
              fontSize: 14,
              align: 'center',
            },
            rn: {
              width: 86,
              fontSize: 14,
              fontWeight: 600,
              color: 'rgba(64, 158, 255, 1)',
              align: 'center',
            },
            add: {
              width: 86,
              borderColor: 'rgba(238, 238, 238, 1)',
              borderWidth: 1,
              borderRadius: [0, 0, 0, 6],
              height: 38,
              lineHeight: 38,
              align: 'center',
              backgroundColor: {
                image: 'addtree',
              },
            },
            edit: {
              width: 86,
              borderColor: 'rgba(238, 238, 238, 1)',
              borderWidth: 1,
              height: 38,
              lineHeight: 38,
              align: 'center',
              backgroundColor: {
                image: 'edittree',
              },
            },
            remove: {
              width: 86,
              borderColor: 'rgba(238, 238, 238, 1)',
              borderWidth: 1,
              borderRadius: [0, 0, 6, 0],
              height: 38,
              lineHeight: 38,
              align: 'center',
              backgroundColor: {
                image: 'deltree',
              },
            }
          }
        },
        leaves: {
          label: {
            position: 'right',
            verticalAlign: 'middle',
            align: 'left'
          }
        },
        emphasis: {
          focus: 'series',
          label: {
            backgroundColor: 'rgba(0, 186, 173, 0.14)',
            borderColor: 'rgba(0, 186, 173, 1)',
            borderWidth: 2,
            borderRadius: 6,
          }
        },
        expandAndCollapse: false,
        animationDuration: 550,
        animationDurationUpdate: 750
      }]
    }
    treeChart.setOption(option, true)
    treeChart.off('click').on('click', function (params) {
      state.parentAreaId = params.data.id
      if (params.event.target.style.image == 'addtree' || params.event.target.style.text == '新增') {
        addBtn()
      } else if (params.event.target.style.image == 'edittree' || params.event.target.style.text == '编辑') {
        editBtn({
          id: params.data.id
        })
      } else if (params.event.target.style.image == 'deltree' || params.event.target.style.text == '删除') {
        deleteBtn({
          id: params.data.id
        })
      } else if (params.event.target.style.text=='moretree') {
        state.moreCardObj.show = true
        state.moreCardObj.y = params.event.offsetY + 70
        state.moreCardObj.x = params.event.offsetX - 100
      }
    })

  }

  function moreCardObjChange(val) {
    if (Number(val[0]) == 2) {
      gettreeList(state.parentAreaId,state.treeDataIndex)
    }
    state.moreCardObj.show = false
  }

  function treeDataClick(item) {
    item.isHighLight=false
    state.moreCardObj.show=false
    state.treeDataIndex = item.id
    gettreeList(undefined,item.id)
    // nextTick(() => {
    //   treeChart = echarts.init(document.getElementById("treeChart"));
    //   setC1(item)
    // })
  }
  onMounted(() => {
    gettreeList(store.isHighLightid,state.treeDataIndex);
  });
  // 多维导图
  // 节点点击事件处理函数
  function daotuAddClick() {
    state.modalTitle = "新增区域";
    state.addModal = true;
    state.formData = {};
    state.formData.parentAreaId = null;
    state.formData.rootId = null;
    state.locations = [];
    state.editId = undefined;
  }

  function handleClose() {
    getnearAreaList1("已设置相邻");
    state.drawerNearShow = false;
  }
</script>
<style lang="scss" scoped>
  .treeTabBox {
    display: flex;
    margin-top: 16px;

    .sBox {
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 12px 14px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.6);
      border: 1px solid rgba(91, 109, 128, 0.16);
      font-size: 14px;
      margin-right: 16px;
      font-weight: 500;

      &.active {
        border: 1px solid rgba(68, 136, 255, 1);
        color: rgba(68, 136, 255, 1);
      }

      img {
        width: 18px;
        height: 18px;
        margin-right: 6px;
      }

      &:hover {
        border: 1px solid rgba(68, 136, 255, 1);
        color: rgba(68, 136, 255, 1);
      }
    }
  }

  :deep(.el-cascader-menu) {
    min-width: 116px;
  }

  :deep(.el-cascader-menu__wrap.el-scrollbar__wrap) {
    height: 85px;
  }

  :deep(.sel .el-input .el-input__wrapper) {
    box-shadow: none !important;
    background: transparent;
  }

  .pagestyle {
    height: calc(100vh - 150px) !important;
    background-color: rgba(255, 255, 255, .8);
    margin: 10px;
    border-radius: 8px;
  }

  ::v-deep .allbk {
    .table_box {
      height: calc(100vh - 194px) !important;

      &.w100 {
        .hhhhh {
          height: calc(100vh - 194px) !important;
        }
      }
    }
  }

  ::v-deep .el-drawer .table_box .fsc {
    display: none;
  }
</style>
<style lang="scss">
  #jsmind_container {
    width: 100%;
    height: 100vh;
  }

  /* Optional styles */
  /* 隐藏所有节点的折叠图标 */
  jmexpander {
    display: none !important;
  }

  jmnode {
    padding: 0;
    border: 1px solid rgba(238, 238, 238, 1);
    box-shadow: none;
    border-radius: 6px;
    background-color: rgb(255, 255, 255, 0.8) !important;

    &:hover {
      box-shadow: none;
      background-color: rgba(0, 186, 173, 0.14);
      color: #333;
      border: 2px solid rgba(0, 186, 173, 1);
    }
  }

  jmnode.selected {
    background-color: rgb(255, 255, 255, 0.8) !important;
    box-shadow: none;
    color: #333;
  }

  .model-edit-card {
    font-size: 14px;

    &.active {
      box-shadow: none;
      background-color: rgba(0, 186, 173, 0.14);
      color: #333;
      border: 2px solid rgba(0, 186, 173, 1);
    }

    .model-title-p {
      font-weight: 700;
      padding: 0 10px 0 30px;
      background-image: url("@/assets/images/dao.png");
      background-repeat: no-repeat;
      background-position: 10px;
    }

    .model-name-info {
      .btn {
        width: 34%;
        display: block;
        padding: 10px 30px;
        color: rgba(62, 70, 79, 0.8);
        border: 1px solid rgba(238, 238, 238, 1);
        cursor: pointer;
      }

      p {
        margin: 0 15px;
        padding: 5px 0;
        color: rgba(53, 140, 240, 1);

        &.p {
          color: rgba(62, 70, 79, 0.6);
        }
      }

      display: flex;
      justify-content: space-between;
      text-align: center;
    }
  }
</style>